<template>
  <div>
    <el-card class="box-card">

      <div slot="header"
           class="clearfix">
        <span style="color: black ; font-weight: 700;">选择首页模版</span>

      </div>

      <div class="flex-around paddFil">
        <div v-for="(item, i) in templateLists"
             class="flex-column"
             :key="i">

          <div style="margin-bottom: 10px">
            <img class="avater"
                 @click="templateImage(i)"
                 :src="item.img"
                 alt="" />
          </div>

          <el-radio v-model="agreeChecked[i]"
                    @input="e=>selsectTemplate(e,i,item)"
                    :label=true>{{
		`${item.name}`
				}}</el-radio>
        </div>

      </div>

    </el-card>
    <div class="ele-bottom-tool"
         v-if="validMsg">

      <div class="ele-bottom-tool-actions">
        <el-button type="primary"
                   :loading="loading"
                   @click="submit">
          提交
        </el-button>
      </div>
    </div>
  </div>
</template>
  <script>
import { templateList, upTemplate } from '@/api/HomePageSettings/index'

export default {
  name: 'homepage',
  components: {},
  data () {
    return {
      validMsg: false,
      isUpdata: false,
      loading: false,
      currentTemplateIndex: '',
      agreeChecked: [true, false, false, false],
      form: {
        homePageTemplate: 0,

      },
      apiValue: null,
      templateLists: [


      ]
    };
  },
  props: {},
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  activated () {
    this.init()

  },
  mounted () {



  },
  methods: {
    // 查询当前是否 是否新增没有新增就是修改
    init () {
      setTimeout(() => {
        this.validMsg = true
      }, 800)
      // 查询回显
      templateList({
        page: 1,
        limit: 10000
      }).then((res) => {
        console.log(res)
        this.templateLists = res
        const findindex = this.templateLists.findIndex((item, index) => {
          this.agreeChecked[index] = false
          return item.status == 1
        })
        console.log(findindex)

        this.agreeChecked[findindex] = true
        this.apiValue = this.templateLists[findindex]

      })
    },
    selsectTemplate (e, index, value) {
      for (let i = 0; i <= 3; i++) {
        // console.log(i);
        // this.agreeChecked[i]=false
        this.$set(this.agreeChecked, i, false);
      }
      console.log(index, value)
      this.$set(this.agreeChecked, index, true);
      this.apiValue = value



    },
    templateImage (i) {
      this.currentTemplateIndex = i
      this.form.homePageTemplate = i
    },
    submit () {
      this.loading = true;


      upTemplate({
        id: this.apiValue.id,
        status: 1,
      }).then((msg) => {
        this.loading = false;

        this.init()
        console.log(msg)
        this.$message.success(msg.message);
      }).catch((e) => {
        this.loading = false;
        this.$message.error(e.message);
      });
    }
  }
};
 </script>
  <style lang="less" scoped>
.avater {
  width: 222px;
  height: 510px;
  cursor: pointer;
}
.paddFil {
  height: 650px;
}
/deep/ .ele-bottom-tool-actions {
  text-align: center;
}
/deep/.el-radio__inner:after {
  background-color: #26c278;
}
/deep/.el-radio__inner:after {
  background-color: #26c278;
}

/deep/.el-radio__input.is-checked .el-radio__inner {
  border-color: #26c278;
}
/deep/.el-radio__input.is-checked + .el-radio__label {
  color: #112231;
}
</style>
	 